<script setup>
import { ref } from 'vue'
import { useVueFlow, VueFlow } from '@vue-flow/core'
import { Controls, ControlButton } from '@vue-flow/controls'
// import default controls styles
import '@vue-flow/controls/dist/style.css'

const { zoomIn, zoomOut, fitView, nodesDraggable } = useVueFlow()
// these are our nodes
const nodes = ref([
  // an input node, specified by using `type: 'input'`
  {
    id: '1',
    type: 'input', // 开始节点（绿色）
    position: { x: 250, y: 5 },
    // all nodes can have a data object containing any data you want to pass to the node
    // a label can property can be used for default nodes
    data: { label: 'Node 1' },
  },

  // default node, you can omit `type: 'default'` as it's the fallback type
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },

  // An output node, specified by using `type: 'output'`
  {
    id: '3',
    type: 'output', // 结束节点（红色）
    position: { x: 400, y: 200 },
    data: { label: 'Node 3' },
  },
  {
    id: '4',
    position: { x: 400, y: 200 },
    data: {
      label: 'Node 4',
      hello: 'world',
    },
  },
])

// these are our edges
const edges = ref([
  // default bezier edge
  // consists of an edge id, source node id and target node id
  {
    id: 'e1->2',
    source: '1',
    target: '2',
  },

  // set `animated: true` to create an animated edge path
  {
    id: 'e2->3',
    source: '2',
    target: '3',
    animated: true,
  },
  {
    id: 'e3->4',
    source: '3',
    target: '4',
    // all edges can have a data object containing any data you want to pass to the edge
    data: {
      hello: 'world',
    },
  },
])

const handleInteractive = () => {
  nodesDraggable.value = !nodesDraggable.value
}
</script>

<template>
  <div style="height: calc(100vh - 60px)">
    <VueFlow :nodes="nodes" :edges="edges">
      <!--:showZoom="false" :showFitView="false" :showInteractive="false"-->
      <Controls position="bottom-left">
        <template #top>
          <div>插槽方式：</div>
        </template>
        <!--插槽不生效？应该怎么写？这样写：-->
        <template #control-zoom-in>
          <a-tooltip content="放大">
            <a-button type="text" class="arco-btn-only-icon" size="small" @click="zoomIn">
              <icon-plus />
            </a-button>
          </a-tooltip>
        </template>
        <template #control-zoom-out>
          <a-tooltip content="缩小">
            <a-button type="text" class="arco-btn-only-icon" size="small" @click="zoomOut">
              <icon-minus />
            </a-button>
          </a-tooltip>
        </template>

        <template #control-fit-view>
          <a-tooltip content="适合视图">
            <a-button type="text" class="arco-btn-only-icon" size="small" @click="fitView">
              <icon-fullscreen />
            </a-button>
          </a-tooltip>
        </template>
        <template #control-interactive>
          <a-tooltip :content="`交互${nodesDraggable ? '解锁' : '锁定'}`">
            <a-button
              type="text"
              class="arco-btn-only-icon"
              size="small"
              @click="handleInteractive"
            >
              <icon-unlock v-if="nodesDraggable" />
              <icon-lock v-else />
            </a-button>
          </a-tooltip>
        </template>


        <!--<template #default>
          <icon-bar-chart />
        </template>-->

        <!-- 自定义zoom、fitView、draggable。增加了tooltip，且icon统一了。 -->
        <ControlButton @click="zoomIn">
          <a-tooltip content="放大">
            <icon-plus />
          </a-tooltip>
        </ControlButton>
        <ControlButton @click="zoomOut">
          <a-tooltip content="缩小">
            <icon-minus />
          </a-tooltip>
        </ControlButton>
        <ControlButton @click="fitView">
          <a-tooltip content="适合视图">
            <icon-fullscreen />
          </a-tooltip>
        </ControlButton>
        <ControlButton @click="handleInteractive">
          <!--带来问题：锁定的时候，原来不可以添加节点，现在可以了。有问题不？-->
          <a-tooltip :content="`交互${nodesDraggable ? '解锁' : '锁定'}`">
            <icon-unlock v-if="nodesDraggable" />
            <icon-lock v-else />
          </a-tooltip>
        </ControlButton>
      </Controls>
    </VueFlow>
  </div>
</template>

<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>
